/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import React, {Component} from 'react';
import {TextInput, StyleSheet} from 'react-native';
import { Icon, List, Accordion  } from 'antd-mobile-rn';

// project
import {
    Page, Content, Header, Row, Between, Hand, Text, Image, TouchOpacity, ItemX
} from '../../../library';
import HttpTemp from '../../../preset/func/http/httptemp';

/******************************************************************************************
 * Component
 ******************************************************************************************/

class AccordionTitle extends Component {
    constructor(props){
        super(props)
    }

    render(){
        return(
            <Row df h='46' x='left' y='center'>
                {/*  bb='1 f0f0f0'  */}
                <Row df h='46' x='left' y='center'>
                    <Image df source={this.props.image || require('../../../assets/u1908.png')} w='24' h='24' mr='10'></Image>
                    <Text color='#5e5e5e'>{this.props.text}</Text>
                </Row>
            </Row>
        )
    }
}

/******************************************************************************************
 * Export
 ******************************************************************************************/

export default class Help extends Component {

    /*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
    constructor(props) {
        super(props);
        this.Nav = this.props.navigation;

        /**
         * state
         */
        this.state = {
            helpList:[]
        };
    }

    /*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
    componentDidMount() {
		// SplashScreen.hide();

		HttpTemp.get({
            url: '/page/help/list.php',
            data:{},
			success: (res)=> {
				console.log('成功');
                // console.log(res);
                this.setState({helpList:res.data})
                console.log('this.state.helpList',this.state.helpList)
			}
		});
	}


    /*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
    /**
     * 
     */
    onChange = (key) => {
        console.log(key);
    }

    /*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
    render() {
        const LItem = List.Item;
        return(
            <Page>

                <Content bg='#efeff4' mt='48'>
                    {/* 搜索 star */}
                    <Row pa='8 10' ma='8 10' df bg='#fff' ra='5' h='30' x='center' y='center'>
                        <Image df source={require('../../../assets/u1844.png')} w='14' h='14' mr='6'></Image>
                        <Hand f='1'>
                            <TextInput placeholder='搜索' placeholderTextColor='#bfbfbf' multiline = {true} underlineColorAndroid='transparent' style={{height:30,padding:0,flex:1}} />
                        </Hand>
                    </Row>
                    {/* 搜索 star */}
                    
                    {/* 问题列表 star */}
                        <Accordion style={{borderWidth:0,backgroundColor:'#fff'}} onChange={this.onChange}>

                            {this.state.helpList.map( item =>{
                                return (
                                    // 循环一级类目
                                    <Accordion.Panel header={<AccordionTitle text={item.set_name} />}>
                                        <List>
                                        {item.item.map( ques => {
                                            // 循环问题
                                            return(
                                                <LItem><Text style={styles.text}>{ques.set_name}</Text></LItem>
                                            )
                                        })}
                                        </List>
                                    </Accordion.Panel>
                                )
                            })}
                            
                        </Accordion>
                    {/* 问题列表 end */}
                    
                    {/* 留言按钮 star */}
                    <Row bg='#fff' pa='20 10' x='center' y='center' pt='35'>

                        <TouchOpacity active={1} bg='#f8f8f8' py='10' ba='1 #e4e4e4' f='1'>
                            <ItemX x='center' y='center'>
                                <Hand mr='5'><Image source={require('../../../assets/u2280.png')} w='22' h='25'></Image></Hand>
                                {/* <Hand mr='5'><Icon type='check-circle-o' size='xs' color='#888'></Icon></Hand> */}
                                <Hand><Text color='#5e5e5e' size='17'>在线留言</Text></Hand>
                            </ItemX>
                        </TouchOpacity>
                        
                    </Row>
                    {/* 留言按钮 star */}

                </Content>

                {/* 顶部 star */}
                <Header h='48' y='center' bg='#fff' style={{ borderBottomColor:"#eee", borderBottomWidth:1 }}>
                    <Between px='10'>
                        <TouchOpacity active={0.6} onPress={(e)=> {
                            this.Nav.goBack()
                        }}>
                            <Icon type='left' size='md' color='#00CC66' />
                        </TouchOpacity>

                        <Text size='17'>我的订单</Text>
                        <Text></Text>
                    </Between>
                </Header>
                {/* 顶部 star */}
            </Page>
        )
    }
}


const styles = StyleSheet.create ({
        listItem:{
        color:'#5e5e5e',
        fontSize:14,
        fontWeight:'normal'
    }
})